<template>
	<view>
		<view class="list-box">
			<view class="list-item" v-for="(item,index) in list" :key="index" @click="cellClick(item)">
				<view class="flex-box">
					<view class="left-item">
						<view class="">{{item.shopAddress}}</view>
						<view class="">{{item.createTime}}</view>
					</view>
					<view :class="['right-item',statusColor(item)]">{{getStatus(item)}}</view>
				</view>
			</view>
			<u-empty v-if="list.length == 0"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		pageMyRecord
	} from '@/api/commen.js'
	export default {
		data() {
			return {
				list: [
				],
			};
		},
		onLoad() {
			uni.showLoading({
				title: '加载中...'
			})
			this.getDataList();
		},
		methods: {
			async getDataList() {
				const res = await pageMyRecord({pageNum:1, pageSize: 1000});
				uni.hideLoading();
				if (res.code == 200) {
					if (res.data != null) {
						this.list = res.data.records;
					}else {
						this.list = [];
					}
				} else {
					uni.showToast({
						title: res.msg,
					})
				}
				console.log(res);
			},
			cellClick(item) { 
				uni.navigateTo({
					url: '/pages/applyHistory/applyDetail?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			getStatus(item) {
				if (item.approveStatus === 0) {
					return '待审核'
				}else if (item.approveStatus === 2) {
					return '未通过'
				}else if (item.approveStatus === 1) {
					return '已通过'
				}
			},
			statusColor(item) {
				if (item.approveStatus === 0) {
					return 'status_1'
				}else if (item.approveStatus === 2) {
					return 'status_2'
				}else if (item.approveStatus === 1) {
					return 'status_3'	
				}
				return ''
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f2f4f6;
	}
	.list-box{ 
		padding: 8px;
		display: flex;
		height: 100%;
		flex-direction: column;
		gap: 12px;
		.list-item {
			border-radius: 5px;
			background-color: white;
			// min-height: 100px;
			padding: 12px 16px ;
			box-sizing: border-box;
			.flex-box {
				display: flex;
				.left-item {
					display: flex;
					flex-direction: column;
					gap: 16px;
					flex: 1;
				}
				.right-item {
					// font-weight: bold;
					flex-shrink: 0;
				}
			}
		}
	}
	.status_1{
		color: #f6cf32;
	}
	.status_2{
		color: #f61216;
	}
	.status_3{
		color: #28f67b;
	}
</style>
